<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>巡边查看</title>
  <link rel="stylesheet" href="../../../yl/index.css" />
  <link rel="stylesheet" href="../../../style/wangeditor.css">
  <!-- 布局样式 -->
  <link rel="stylesheet" href="../../../yl/style.css" />
  <link rel="stylesheet" href="../../../yl/mobile.css" />
  <link rel="stylesheet" href="../../../yl/easyui.css" />
  <link rel="stylesheet" href="../../../yl/icon.css" />
</head>
<style>
  #container {
    width: 100%;
    height: 600px;
  }

  /* body {
            margin: 0;
            padding: 0;
        } */
</style>

<body>

  <!-- <script>
        // 初始化地图，设置漠河市中心点
        const map = new TMap.Map("container", {
            center: new TMap.LatLng(52.9721, 122.5372), // 漠河市中心点坐标
            zoom: 13
        });

        // 轨迹坐标点数据（示例）
        const points = [
            {lat: 52.9721, lng: 122.5372, time: "08:00"},  // 漠河市中心
            {lat: 52.9823, lng: 122.5201, time: "08:15"},
            {lat: 52.9876, lng: 122.5302, time: "08:30"},
            {lat: 52.9754, lng: 122.5456, time: "08:45"}
        ];

        // 创建轨迹线
        const polyline = new TMap.MultiPolyline({
            map: map,
            geometries: [{
                id: 'track_line',
                styleId: 'line_style',
                paths: points.map(p => new TMap.LatLng(p.lat, p.lng))
            }],
            styles: {
                'line_style': new TMap.PolylineStyle({
                    color: '#3777FF',
                    width: 5,
                    borderWidth: 2,
                    borderColor: '#FFF'
                })
            }
        });

        // 创建自定义图标样式
        const iconStyles = {
            'custom_start': new TMap.MarkerStyle({
                width: 32,
                height: 32,
                anchor: { x: 16, y: 32 },
                src: 'start.png' // 起点图标
            }),
            'custom_end': new TMap.MarkerStyle({
                width: 32,
                height: 32,
                anchor: { x: 16, y: 32 },
                src: 'end.png' // 终点图标
            }),
            'custom_normal': new TMap.MarkerStyle({
                width: 24,
                height: 24,
                anchor: { x: 12, y: 24 },
                src: 'marker.png' // 普通点图标
            })
        };

        // 添加标记点(使用自定义图标)
        const markerLayer = new TMap.MultiMarker({
            map: map,
            styles: iconStyles, // 使用自定义图标样式
            geometries: points.map((point, index) => {
                // 判断是否为起点或终点
                let styleId;
                if (index === 0) {
                    styleId = 'custom_start'; // 第一条数据使用起点图标
                } else if (index === points.length - 1) {
                    styleId = 'custom_end'; // 最后一条数据使用终点图标
                } else {
                    styleId = 'custom_normal'; // 中间点使用普通图标
                }

                return {
                    id: `point_${index}`,
                    position: new TMap.LatLng(point.lat, point.lng),
                    properties: {
                        title: `时间: ${point.time}`,
                        index: index,
                        pointType: index === 0 ? '起点' : 
                                 (index === points.length - 1 ? '终点' : '途经点')
                    },
                    styleId: styleId
                };
            })
        });

        // 点击标记点显示信息
        markerLayer.on('click', (evt) => {
            const { geometry } = evt;
            const info = `坐标点 ${geometry.properties.index + 1}<br>
                         位置: ${geometry.position.lat.toFixed(4)}, ${geometry.position.lng.toFixed(4)}<br>
                         时间: ${geometry.properties.title}`;
            
            new TMap.InfoWindow({
                map: map,
                position: geometry.position,
                content: info
            });
        });

        // 调整视图以显示所有点
        const bounds = new TMap.LatLngBounds();
        points.forEach(point => bounds.extend(new TMap.LatLng(point.lat, point.lng)));
        map.fitBounds(bounds);
    </script> -->

  <!-- <div id="app"> -->
  <div class="easyui-navpanel" id="app" v-cloak>
    <header>
      <div class="m-toolbar" v-cloak>
        <div class="m-title">巡边查看</div>
      </div>
    </header>
    <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
      id="MainTable" ref="MainTable"
      :data-options="JSON.stringify({ 'TableName': 'patrol_Result_Coord', 'form': 'dataForm', 'primary_key':'Result_Coord_SerialNumber' })">
      <div class="yl-main" v-cloak>
        <div class="table_titel">
          <div class="titel">巡边信息</div>
        </div>
        <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">任务编码</div>
              </template>
              <el-form-item prop="taskPlan_SerialNumber">
                <el-input disabled v-model="dataForm.taskPlan_SerialNumber" class="borderless-input"
                  placeholder="请输入任务编码" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">任务名称</div>
              </template>
              <el-form-item prop="taskPlan_SerialNumber">
                <el-input disabled v-model="Task_Name" class="borderless-input" placeholder="请输入任务名称" />
              </el-form-item>
            </el-descriptions-item>



            <el-descriptions-item>
              <template #label>
                <div class="cell-item">任务日期</div>
              </template>
              <el-form-item prop="PlanDate">
                <el-input disabled v-model="Task_PlanDate" class="borderless-input" placeholder="请输入任务日期" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">开始时间</div>
              </template>
              <el-form-item prop="Start_Datetime">
                <el-input disabled v-model="dataForm.Start_Datetime" class="borderless-input" placeholder="请输入开始时间" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">结束时间</div>
              </template>
              <el-form-item prop="End_Datetime">
                <el-input disabled v-model="dataForm.End_Datetime" class="borderless-input" placeholder="请输入结束时间" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">巡逻汇报</div>
              </template>
              <el-form-item prop="Patrol_Report">
                <yl-text-editor disabled v-model="dataForm.Patrol_Report" placeholder="请填写巡逻汇报"></yl-text-editor>
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">轨迹长度（米）</div>
              </template>
              <el-form-item prop="routeLength">
                <el-input disabled v-model="dataForm.routeLength" class="borderless-input" placeholder="请输入轨迹长度（米）" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">位置更新</div>
              </template>
              <el-form-item prop="locationUpdateCount">
                <el-input disabled v-model="dataForm.locationUpdateCount" class="borderless-input"
                  placeholder="请输入位置更新" />
              </el-form-item>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">坐标集</div>
              </template>
              <el-form-item prop="Coord">
                <yl-text-editor disabled v-model="dataForm.Coord" placeholder="请填写坐标集"></yl-text-editor>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">地图</div>
              </template>
              <el-form-item prop="Coord">
                <div id="container"></div>
              </el-form-item>
            </el-descriptions-item>

          </el-descriptions>
        </el-form>

      </div>
    </div>

    <footer class="botton-ann">
      <el-button @click="goBack">返回</el-button>
      <!-- <el-button type="primary" :loading="loading" plain @click="handleSubmit">提交</el-button> -->
    </footer>
  </div>
</body>
<!-- <script src="https://map.qq.com/api/gljs?v=1.exp&key=UJCBZ-WJ2K7-I7UX2-HYIOY-G2R7F-N4FQM"></script> -->
 <script src="./js/qqApi.js"></script>
<script src="../../../utils/utils.js"></script>
<script src="../../../config/config.js"></script>
<script src="../../../utils/wangeditor.js"></script>
<script src="../../../utils/mixins.js"></script>
<script src="../../../yl/vue.js"></script>
<script src="../../../yl/index.js"></script>
<script src="../../../yl/zh-cn.mjs"></script>
<script src="../../../yl/index.iife.min.js"></script>
<script src="../../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
<script src="../../../yl/jquery.easyui.min.js"></script>
<script src="../../../yl/jquery.easyui.mobile.js"></script>
<script src="../../../yl/moment.min.js"></script>
<script src="../../../api/request.js"></script>
<script src="./js/add.js"></script>
<script>
  const map = new TMap.Map("container", {
    center: new TMap.LatLng(52.9721, 122.5372), // 漠河市中心点坐标
    zoom: 13
  });

  $(document).ready(function () {
    let ls_URL = window.location.href;
    let nodeKey = getQueryObject(ls_URL, "nodeKey");

    $.ajax({

      headers: requestHeaders(),
      url: `${mh}/generalBusiness/generalQueryByTableName`,
      type: "POST",
      data: {
        Data: 'patrol_Result_Coord',
        Condition: "Row_Status='0' and  Result_Coord_SerialNumber='" + nodeKey + "'",
      },
      success: (data) => {
        const rawCoordinates = JSON.parse(data[0].Coord);

        const points = rawCoordinates.map((coord, index) => ({
          lat: coord[1],  // 纬度 (第二个元素)
          lng: coord[0],  // 经度 (第一个元素)
          order: index + 1
        }));

        // [{ lat: 52.9721, lng: 122.5372, time: "08:00" },  // 漠河市中心
        // { lat: 52.9823, lng: 122.5201, time: "08:15" },
        // { lat: 52.9876, lng: 122.5302, time: "08:30" },
        // { lat: 52.9754, lng: 122.5456, time: "08:45" }
        // ]
        generatePolyline(points);
        generateMarker(points);
      },
      complete: (XMLHttpRequest) => {
        requestPretreatment(XMLHttpRequest);
      },
      dataType: "json",


    })
  })


  function generatePolyline(points) {
    new TMap.MultiPolyline({
      map,
      geometries: [{
        id: 'track_line',
        styleId: 'line_style',
        paths: points.map(p => new TMap.LatLng(p.lat, p.lng))
      }],
      styles: {
        'line_style': new TMap.PolylineStyle({
          color: '#3777FF',
          width: 5,
          borderWidth: 2,
          borderColor: '#FFF'
        })
      }
    });

    // 调整视图以显示所有点
    const bounds = new TMap.LatLngBounds();
    points.forEach(point => bounds.extend(new TMap.LatLng(point.lat, point.lng)));
    map.fitBounds(bounds);
  }

  function generateMarker(points) {
    const iconStyles = {
      'custom_start': new TMap.MarkerStyle({
        width: 32,
        height: 32,
        anchor: { x: 16, y: 32 },
        src: 'start.png' // 起点图标
      }),
      'custom_end': new TMap.MarkerStyle({
        width: 32,
        height: 32,
        anchor: { x: 16, y: 32 },
        src: 'end.png' // 终点图标
      }),
      'custom_normal': new TMap.MarkerStyle({
        width: 24,
        height: 24,
        anchor: { x: 12, y: 24 },
        src: 'marker.png' // 普通点图标
      })
    };

    // 添加标记点(使用自定义图标)
    const markerLayer = new TMap.MultiMarker({
      map: map,
      styles: iconStyles, // 使用自定义图标样式
      geometries: points.map((point, index) => {
        // 判断是否为起点或终点
        let styleId;
        if (index === 0) {
          styleId = 'custom_start'; // 第一条数据使用起点图标
        } else if (index === points.length - 1) {
          styleId = 'custom_end'; // 最后一条数据使用终点图标
        } else {
          styleId = 'custom_normal'; // 中间点使用普通图标
        }

        return {
          id: `point_${index}`,
          position: new TMap.LatLng(point.lat, point.lng),
          properties: {
            title: `时间: ${point.time}`,
            index: index,
            pointType: index === 0 ? '起点' :
              (index === points.length - 1 ? '终点' : '途经点')
          },
          styleId: styleId
        };
      })
    });

    // 点击标记点显示信息
    markerLayer.on('click', (evt) => {
      const { geometry } = evt;
      const info = `坐标点 ${geometry.properties.index + 1}<br>
                         位置: ${geometry.position.lat.toFixed(4)}, ${geometry.position.lng.toFixed(4)}<br>
                         时间: ${geometry.properties.title}`;

      new TMap.InfoWindow({
        map: map,
        position: geometry.position,
        content: info
      });
    });
  }

</script>

</html>